import React from 'react';
import { Card, Descriptions, Tag, Divider, Button, Space, Typography } from 'antd';
import { 
  FileTextOutlined, 
  DownloadOutlined, 
  EditOutlined, 
  DeleteOutlined, 
  ShareAltOutlined,
  ClockCircleOutlined
} from '@ant-design/icons';
import { Document } from '../../stores/documentStore';

const { Title, Paragraph } = Typography;

interface DocumentDetailsProps {
  document: Document | null;
  onClose: () => void;
}

const DocumentDetails: React.FC<DocumentDetailsProps> = ({ document, onClose }) => {
  if (!document) return null;
  
  return (
    <Card
      title={(
        <Space>
          <FileTextOutlined />
          <span>文档详情</span>
        </Space>
      )}
      extra={<Button onClick={onClose}>关闭</Button>}
    >
      <Title level={4}>{document.name}</Title>
      <div style={{ display: 'flex', marginBottom: 16, alignItems: 'center' }}>
        <Tag color="blue">{document.type}</Tag>
        <Tag color={document.status === '已发布' ? 'green' : document.status === '草稿' ? 'orange' : 'default'}>
          {document.status}
        </Tag>
        <div style={{ marginLeft: 'auto', fontSize: 12, color: 'rgba(0, 0, 0, 0.45)' }}>
          <ClockCircleOutlined style={{ marginRight: 4 }} />
          最后更新: {new Date(document.updateTime).toLocaleDateString()}
        </div>
      </div>
      
      <Divider style={{ margin: '12px 0' }} />
      
      <Descriptions column={1}>
        <Descriptions.Item label="文档ID">{document.id}</Descriptions.Item>
        <Descriptions.Item label="创建者">{document.creator}</Descriptions.Item>
        <Descriptions.Item label="创建时间">{new Date(document.createTime).toLocaleDateString()}</Descriptions.Item>
        <Descriptions.Item label="文件大小">{document.size}</Descriptions.Item>
        <Descriptions.Item label="标签">
          <Space wrap>
            {document.tags.map((tag: string) => (
              <Tag key={tag}>{tag}</Tag>
            ))}
          </Space>
        </Descriptions.Item>
      </Descriptions>
      
      <Divider orientation="left">内容摘要</Divider>
      <Paragraph ellipsis={{ rows: 3, expandable: true }}>
        {document.description || '暂无描述'}
      </Paragraph>
      
      <Divider style={{ margin: '12px 0' }} />
      
      <Space style={{ marginTop: 16 }}>
        <Button icon={<DownloadOutlined />}>下载</Button>
        <Button icon={<EditOutlined />} type="primary">编辑</Button>
        <Button icon={<ShareAltOutlined />}>分享</Button>
        <Button icon={<DeleteOutlined />} danger>删除</Button>
      </Space>
    </Card>
  );
};

export default DocumentDetails; 